<div class="section">
  <div class="heading">
    <div class="title"><strong>过渡效果</strong></div>
  </div>
  <div class="article box">
    <p>过渡效果辅助类一般通过 JavaScript 添加 <code>.in</code> 来显示过渡动画，移除 <code>.in</code> 则显示逆向动画。</p>
    <h5>渐变效果：<span class="code">.fade</code></h5>
    <a class="btn primary fade in ani-trigger">点击测试渐变效果</a>
    <hr class="space">
    <h5>缩放效果：<span class="code">.scale</span></h5>
    <a class="btn primary scale in ani-trigger">点击测试缩放效果</a>
    <hr class="space">
    <p>渐变效果和缩放效果可以同时使用。</p>
    <a class="btn primary scale fade in ani-trigger">点击测试渐变缩放效果</a>
    <hr class="space">
    <h5>入场效果：<span class="code">.enter-from-*</span> &amp; <span class="code">.scale-from-*</span></h5>
    <a class="box block text-center space-sm primary-pale enter-from-top in ani-trigger">点击测试：.enter-from-top</a>
    <a class="box block text-center space-sm primary-pale enter-from-bottom in ani-trigger">点击测试：.enter-from-bottom</a>
    <a class="box block text-center space-sm primary-pale enter-from-left in ani-trigger">点击测试：.enter-from-left</a>
    <a class="box block text-center space-sm primary-pale enter-from-right in ani-trigger">点击测试：.enter-from-right</a>
    <a class="box block text-center space-sm primary-pale enter-from-center in ani-trigger">点击测试：.enter-from-center</a>
    <a class="box block text-center space-sm red-pale scale-from-top in ani-trigger">点击测试：.scale-from-top</a>
    <a class="box block text-center space-sm red-pale scale-from-bottom in ani-trigger">点击测试：.scale-from-bottom</a>
    <a class="box block text-center space-sm red-pale scale-from-left in ani-trigger">点击测试：.scale-from-left</a>
    <a class="box block text-center space-sm red-pale scale-from-right in ani-trigger">点击测试：.scale-from-right</a>
    <a class="box block text-center space-sm red-pale scale-from-center in ani-trigger">点击测试：.scale-from-center</a>
  </div>
</div>

<div class="section">
  <div class="heading">
    <div class="title"><strong>连续动画</strong></div>
  </div>
  <div class="article box">
    <h5>旋转：<span class="code">.spin</span></h5>
    <a class="btn gray"><i class="icon spin icon-spinner-indicator"></i></a>
    <a class="btn red"><i class="icon icon-star spin"></i></a>
    <a class="btn spin">旋转</a>
    <hr class="space">
    <h5>快速旋转：<span class="code">.spin-fast</span></h5>
    <a class="btn gray"><i class="icon spin-fast icon-spinner-indicator"></i></a>
    <a class="btn red"><i class="icon icon-star spin-fast"></i></a>
    <a class="btn spin-fast">旋转</a>
  </div>
</div>

<script>
$(function() {
    $('.ani-trigger').on($.TapName, function() {
        var $this = $(this).removeClass('in');
        setTimeout(function() {
          $this.addClass('in');
        }, 500);
    });
});
</script>
